	<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
    	.star-ani{
    		-webkit-animation-name:starani;
    		        animation-name:starani;
    		-webkit-animation-duration: .8s;
    		        animation-duration: .8s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	.unstar-ani{
    		-webkit-animation-name:unstarani;
    		        animation-name:unstarani;
    		-webkit-animation-duration: .8s;
    		        animation-duration: .8s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	.miniicon-star{
    		position: absolute;
    		left: 50%;
    		top: 50%;
    		transform: translate(-50%,-50%) scale(1);
    		display: block;
    		color: yellow;
    		z-index: -555;
    		opacity: 0;
    		
    	}
    	.icon-ani1{
    		-webkit-animation-name:iconani1;
    		        animation-name:iconani1;
    		-webkit-animation-duration: 1s;
    		        animation-duration: 1s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	.icon-ani2{
    		-webkit-animation-name:iconani2;
    		        animation-name:iconani2;
    		-webkit-animation-duration: 1s;
    		        animation-duration: 1s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	.icon-ani3{
    		-webkit-animation-name:iconani3;
    		        animation-name:iconani3;
    		-webkit-animation-duration: 1s;
    		        animation-duration: 1s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	@-webkit-keyframes starani{
    		0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,68);}
    		60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,255,20);}
    		90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
    		100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,0);}
    		
    	}
    	@keyframes starani{
    		0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,68);}
    		60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,255,20);}
    		90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
    		100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,0);}
    		
    	}
    	@-webkit-keyframes unstarani{
    		0% {-webkit-transform: scale(0.8);transform: scale(0.8);}
    		60%{-webkit-transform: scale(1.1);transform: scale(1.1);}
    		100%{-webkit-transform: scale(1);transform: scale(1);}
    		
    	}
    	@keyframes unstarani{
    		0% {-webkit-transform: scale(0.8);transform: scale(1);}
    		40%{-webkit-transform: scale(1.1);transform: scale(1.1);}
    		100%{-webkit-transform: scale(1);transform: scale(1);}
    		
    	}
    	@-webkit-keyframes iconani1{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
    		100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
    	}
    	@keyframes iconani1{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
    		100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
    	}
    	@-webkit-keyframes iconani2{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
    		100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
    	}
    	@keyframes iconani2{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
    		100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
    	}
    	@-webkit-keyframes iconani3{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
    		100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
    	}
    	@keyframes iconani3{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
    		100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
    	}
    </style>


	<!-- ugc / 收藏 start-->

	<div class="like " style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
		<!-- 嵌入layui的字体图标 -->
		<!-- 组件文档 "https://www.layui.com/doc/element/icon.html" -->
    	<i class="likeicon layui-icon layui-icon-star" data-anistar='star-ani' data-aniunstar='unstar-ani' data-iconfill='layui-icon-star-fill' style="font-size: 100px;color: yellow;cursor: pointer;display: block;"></i> 
    	<i class="miniicon-star layui-icon layui-icon-star-fill" data-ani='icon-ani1'></i> 
    	<i class="miniicon-star layui-icon layui-icon-star-fill" data-ani='icon-ani2'></i> 
    	<i class="miniicon-star layui-icon layui-icon-star-fill" data-ani='icon-ani3'></i> 
	</div>

	<script type="text/javascript">
		var miniiconstar=$('.miniicon-star');
		$('.likeicon').on('click',function(){
			var likethis=$(this),
			iconfill=likethis.data('iconfill'),
			anistar=likethis.data('anistar'),
			aniunstar=likethis.data('aniunstar');
			likethis.removeClass('layui-icon-star');
			if (likethis.hasClass(iconfill)) {
				likethis.removeClass(iconfill)
				.addClass('layui-icon-star')
				.removeClass(anistar)
				.addClass(aniunstar);
				miniiconstar.each(function(){
					$(this).removeClass($(this).data('ani'));
				});	 
			}else{
				likethis.removeClass(aniunstar).addClass(iconfill).addClass(anistar);
				miniiconstar.each(function(){
					$(this).addClass($(this).data('ani'));
				});
			}
			
		});
		
	</script>
	<!-- ugc / 收藏 start-->
	
	
